<template>
  <view>
    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="onScroll">
      <view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
      <view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
      <view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    onScroll(e) {
      console.log(e)
    }
  },
}
</script>
<style>
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}

#demo1 {
  width: 30%;
  background: red;
}

#demo2 {
  background: yellow;
}

#demo3 {
  background: green;
}
</style>
